<template>
    <el-tabs v-model="activeTab">
        <el-tab-pane label="功能权限" name="1">
            <el-scrollbar height="400px">
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">所有权限</el-checkbox>
                <el-tree
                    ref="treeRef"
                    :data="tenantList"
                    :show-checkbox="true"
                    default-expand-all
                    highlight-current
                    node-key="id"
                    :props="defaultProps"
                    @check-change="nodeClick">
                    <template #default="{ data }">
                        <div>{{ data.name }}</div>
                    </template>
                </el-tree>
            </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="2">
            <el-scrollbar height="400px">
                <el-radio-group v-model="formData.data_permissions">
                    <el-radio :label="0" disabled>跟随角色设置</el-radio>
                </el-radio-group>
                <el-radio-group v-model="formData.data_premission_type" @change="changeCompany">
                    <el-radio :label="1">
                        子企业数据隔离权限
                        <!-- <span class="title-tag">(企业间数据隔离存储)</span> -->
                    </el-radio>
                    <!-- <span class="radio-title">子企业数据隔离权限<span class="title-tag">(企业间数据隔离存储)</span></span> -->
                    <el-radio-group
                        v-model="formData.data_permissions"
                        class="radio-group radio-title"
                        @change="changeSub">
                        <el-radio :label="1">企业内全员数据</el-radio>
                        <el-radio :label="3">自己及子部门权限</el-radio>
                        <el-radio :label="2">仅自己</el-radio>
                    </el-radio-group>
                    <br />
                    <!--暂时注释-->
                    <!-- <el-radio :label="2">集团子企业数据共享权限
                      <span class="title-tag">(集团子企业数据打通)<span class="tag-up"><img src="@/assets/image/role/up.png" class="tag-img"/>去升级</span></span> -->
                    <!-- </el-radio> -->
                    <!-- <span class="radio-title">集团子企业数据共享权限<span class="title-tag">(集团子企业数据打通)<span class="tag-up"><img src="@/assets/image/role/up.png" class="tag-img"/>去升级</span></span></span> -->
                    <!-- <el-radio-group class="radio-group radio-title" @change="changeSub" v-model="sub">
                      <el-radio :label="4">集团全员数据</el-radio>
                      <el-radio :label="5">自己及子部门权限</el-radio>
                      <el-radio :label="6">仅自己</el-radio>
                  </el-radio-group>  -->
                </el-radio-group>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>
<script lang="ts" setup>
import { ref, toRefs, watch, toRef, watchEffect, reactive, nextTick } from 'vue';
import { menuAuth } from '@/api/sub';
import type { ElTree } from 'element-plus';
import type Node from 'element-plus/es/components/tree/src/model/node';

const activeTab = ref('1');
const checkAll = ref(true);
const formData = ref({
    update_menu_list: [],
    data_premission_type: 0,
    data_permissions: 0
});
const tenantList = ref([]);
const treeRef = ref<InstanceType<typeof ElTree>>();
const props = defineProps(['permissionId']);
const setCheckedKeys = (data: any[]) => {
    treeRef.value!.setCheckedKeys(data, false);
};
const resetChecked = () => {
    treeRef.value!.setCheckedKeys([], false);
};
//选中所有权限
const handleCheckAllChange = () => {
    if (checkAll.value) {
        treeRef.value!.setCheckedNodes(treeRef.value!.data as Node[], false);
    } else {
        treeRef.value!.setCheckedKeys([], false);
    }
};
//切换子企业与集团
const changeCompany = () => {
    if (formData.value.data_premission_type == 2) {
        formData.value.data_permissions = 4;
    } else {
        formData.value.data_permissions = 1;
    }
};
//切换内部
const changeSub = () => {
    if (
        formData.value.data_permissions == 1 ||
        formData.value.data_permissions == 2 ||
        formData.value.data_permissions == 3
    ) {
        formData.value.data_premission_type = 1;
    } else {
        formData.value.data_premission_type = 2;
    }
};
//选择节点 - 要被删除的权限
const nodeClick = (data: object, node: any) => {
    if (!node && !formData.value.update_menu_list.includes(data.id)) {
        formData.value.update_menu_list.push(data.id);
    } else {
        formData.value.update_menu_list = formData.value.update_menu_list.filter(item => item != data.id);
    }
};

const defaultcheckes = () => {
    const arr: any = [];
    arr.push(tenantList.value.id);
};
//获取子账号菜单权限
const getMenuAuth = (val: any) => {
    const params = {
        sub_account_id: val
    };
    menuAuth(params).then((data: any) => {
        tenantList.value = data.sub_account_menu_list;
        formData.value.data_permissions = data.data_auth.data_permissions;
        formData.value.data_premission_type = data.data_auth.data_premission_type;
        resetChecked();
        checkAll.value = data.disable_function_ids.length == 0;
        const arr: any = [];
        tenantList.value.forEach(item => arr.push(item.id));
        nextTick(() => {
            treeRef.value!.setCheckedKeys(arr, false);
            data.disable_function_ids.forEach((item: any) => {
                const node = treeRef.value!.getNode(item);
                if (node.isLeaf) {
                    treeRef.value!.setChecked(node, false, true);
                }
            });
        });
    });
};

getMenuAuth(props.permissionId);
defineExpose({
    formData
});
</script>
<style lang="scss" scoped>
.radio-title {
    font-size: 14px;
    color: #33302d;
}
:deep(.el-radio-group) {
    display: block;
    align-items: normal;
}
.radio-group {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
.tag-label {
    font-size: 14px;
    color: #33302d;
}
.tag-up {
    color: #ff6b00;
    font-size: 12px;
    .tag-img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }
}
.title-tag {
    color: #739f44;
    font-size: 12px;
}
</style>
<style>
.el-tree-node__content {
    height: 35px;
}
.el-tree-node__expand-icon {
    color: #ff6b00;
}
</style>
